<template>
  <div v-show="addAlgoPluginModal">
    <Row class="modalBody-algo">
      <Tabs type="card" :animated="true">
        <TabPane label="基本信息">
          <Form
            ref="formValidate"
            :model="algPackageInfoFormItem"
            :label-width="80"
            label-position="right"
            inline
            :rules="ruleValidate1"
            class="algorithmList algoForm"
          >
            <FormItem prop="algName" label="算法名称">
              <Input v-model="algPackageInfoFormItem.algName" placeholder="请输入算法名称" />
            </FormItem>
            <FormItem label="算法简称">
              <Input v-model="algPackageInfoFormItem.algNameAbbr" placeholder="请输入算法简称" />
            </FormItem>
            <FormItem label="算法分组" prop="algGroupName">
              <!-- algPackageInfoFormItem.algGroupName -->
              <!-- currentSelectGroupName -->
              <Cascader
                :data="groupDataCascader"
                change-on-select
                filterable
                v-model="algPackageInfoFormItem.algGroupName"
                class="algGroup"
              ></Cascader>
            </FormItem>
            <FormItem label="算法描述">
              <Input v-model="algPackageInfoFormItem.algDescribe" placeholder="算法描述（可为空）" />
            </FormItem>
            <FormItem label="提供单位">
              <Input v-model="algPackageInfoFormItem.algProvider" placeholder="请输入算法提供单位" />
            </FormItem>
            <FormItem label="算法类型">
              <Select
                v-model="algPackageInfoFormItem.algType"
                class="algGroup"
                @on-change="algoTypeChange"
              >
                <Option
                  v-for="item in algoTypeOptions"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="算法标识" prop="algId">
              <Input v-model="algPackageInfoFormItem.algId" placeholder="请输入算法标识" />
            </FormItem>
            <FormItem label="版本" prop="algVersion">
              <Input v-model="algPackageInfoFormItem.algVersion" placeholder="请输入算法版本号" />
            </FormItem>
          </Form>
        </TabPane>
        <TabPane label="算法包">
          <Form
            ref="algoBaseFormValidate"
            :model="algoFormItems"
            :label-width="124"
            label-position="right"
            :rules="ruleValidate2"
            class="algoForm"
          >
            <FormItem label="算法包文件：" prop="zipFilePath">
              <div style="display: flex">
                <Input v-model="algoFormItems.package" placeholder="仅支持zip包" />

                <Upload :before-upload="zipHandUpload" action :format="['zip']" :accept="'.zip'">
                  <Button type="primary" class="system-btn-style" style="margin-left: 10px">...</Button>
                </Upload>
                <Button
                  v-show="isShowUploadZipBtn"
                  type="primary"
                  icon="ios-cloud-upload-outline"
                  @click="uploadZipFile('zip')"
                  class="system-btn-style"
                  style="margin-left: 10px"
                >上传</Button>

                <div
                  v-if="uploadZipStatus.ok"
                  title="成功上传"
                  style="width: 38px; color: green; margin-left: 10px"
                >
                  <CIcon name="cilCheckCircle" />
                </div>

                <div
                  v-if="uploadZipStatus.unOk"
                  title="上传失败"
                  style="width: 38px; color: red; margin-left: 10px"
                >
                  <CIcon name="cil-x-circle" />
                </div>
              </div>
            </FormItem>

            <FormItem label="算法图片路径：" prop="iconPath">
              <div style="display: flex">
                <Input v-model="algoFormItems.iconFile" placeholder="仅支持png" />
                <Upload :before-upload="iconHandUpload" action :format="['png']" :accept="'.png'">
                  <Button type="primary" class="system-btn-style" style="margin-left: 10px">...</Button>
                </Upload>
                <Button
                  v-show="isShowUploadIconBtn"
                  type="primary"
                  icon="ios-cloud-upload-outline"
                  @click="uploadZipFile('icon')"
                  class="system-btn-style"
                  style="margin-left: 10px"
                >上传</Button>
                <div
                  v-if="uploadIconStatus.ok"
                  title="成功上传"
                  style="width: 38px; color: green; margin-left: 10px"
                >
                  <CIcon name="cilCheckCircle" />
                </div>

                <div
                  v-if="uploadIconStatus.unOk"
                  title="上传失败"
                  style="width: 38px; color: red; margin-left: 10px"
                >
                  <CIcon name="cil-x-circle" />
                </div>
              </div>
            </FormItem>
            <FormItem label="算法入口路径：" prop="commandPath">
              <Input v-model="algoFormItems.commandPath" placeholder="例如：/lib64/PIEOrthoBuildPry" />
            </FormItem>

            <!-- <FormItem label="环境变量列表：">
                <Input
                  v-model="algoFormItems.commandPath"
                  placeholder="例如：/lib/PIEOrtho.exe"
            />-->
            <!-- <Collapse>
                  <Panel>
                    请设置环境列表值
                    <div slot="content">
                      <div>
                        <CButton
                          @click="addSeletOptionBtn"
                          color="info"
                          class="system-btn-style"
                          style="margin-top: -10px"
                          >+</CButton
                        >
                      </div>

                      <Form
                        ref="executeFormValidate"
                        :label-width="20"
                        label-position="left"
                        :rules="ruleValidate"
                        inline
                        class="setSelectValueOptionsForm"
                        v-for="(item, index) in selectValueOptions"
                        :key="item.value"
                        :value="item.value"
                      >
                        <FormItem label="键：">
                          <Input
                            v-model="item.labelName"
                            size="samll"
                            placeholder=""
                          />
                        </FormItem>

                        <FormItem label="值：">
                          <Input
                            v-model="item.value"
                            size="samll"
                            placeholder=""
                          />
                        </FormItem>
                        <CButton
                          @click="clearSelectValueItem(item, index)"
                          color="info"
                          class="system-btn-style"
                          >-</CButton
                        >
                      </Form>
                    </div>
                  </Panel>
            </Collapse>-->
            <!-- </FormItem> -->

            <FormItem label="算法执行标识：">
              <Input v-model="algoFormItems.commandId" placeholder />
            </FormItem>
            <FormItem label="镜像文件：" prop="baseImage">
              <Input
                v-model="algoFormItems.baseImage"
                placeholder="从已有的镜像中选择或者上传全新的镜像文件,例如：ortho_base_image:1.0"
              />
            </FormItem>
          </Form>
        </TabPane>
        <TabPane label="参数信息">
          <div>
            <div class="paramTable">
              <div class="header-wrap">
                <span>输入参数</span>
                <div>
                  <!-- <CButton
                      @click="clearItem"
                      color="info"
                      class="system-btn-style"
                      >清除</CButton
                  >-->
                  <CButton
                    @click="addInputParamItemBtn"
                    color="info"
                    class="system-btn-style"
                    style="margin-left: 10px"
                  >+</CButton>
                </div>
              </div>

              <Table stripe :columns="inputColumns" max-height="300" border :data="inputParams">
                <template slot="operator" slot-scope="{ row, index }">
                  <CButton
                    v-c-tooltip="'编辑'"
                    title="编辑"
                    variant="outline"
                    color="info"
                    size="sm"
                    @click="editInputBtn(row, index)"
                  >
                    <CIcon name="cilPencil" />
                  </CButton>
                  <CButton
                    v-c-tooltip="'删除'"
                    title="删除"
                    variant="outline"
                    color="info"
                    size="sm"
                    @click="deleteInputRow(row, index)"
                  >
                    <CIcon name="cil-x-circle" />
                  </CButton>
                </template>
              </Table>
            </div>

            <div class="paramTable" style="margin-top: 20px">
              <div class="header-wrap">
                <span>输出参数</span>
                <div>
                  <!-- <CButton
                      @click="clearItem"
                      color="info"
                      class="system-btn-style"
                      >清除</CButton
                  >-->
                  <CButton
                    @click="addOutputParamItemBtn"
                    color="info"
                    style="margin-left: 10px"
                    class="system-btn-style"
                  >+</CButton>
                </div>
              </div>
              <Table stripe :columns="outputColumns" :data="outputParams">
                <template slot="operator" slot-scope="{ row, index }">
                  <CButton
                    v-c-tooltip="'编辑'"
                    title="编辑"
                    variant="outline"
                    color="info"
                    size="sm"
                    @click="editOutputBtn(row, index)"
                  >
                    <CIcon name="cilPencil" />
                  </CButton>
                  <CButton
                    v-c-tooltip="'删除'"
                    title="删除"
                    variant="outline"
                    color="info"
                    size="sm"
                    @click="deleteOutputRow(row, index)"
                  >
                    <CIcon name="cil-x-circle" />
                  </CButton>
                </template>
              </Table>
            </div>
          </div>
        </TabPane>
        <TabPane label="执行信息">
          <Form
            ref="executeFormValidate"
            :model="executeFormItems"
            :label-width="128"
            label-position="right"
            :rules="ruleValidate3"
            class="algoForm"
          >
            <FormItem prop="name" label="并行拆分方式：">
              <Select v-model="executeFormItems.splitType" style="width: 362px">
                <Option
                  v-for="item in batchOptions"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="拆分参数：">
              <Select
                v-model="executeFormItems.splitItems"
                style="width: 362px"
                multiple
                placeholder="参数来源于输入参数"
              >
                <Option
                  v-for="item in inputParams"
                  :value="item.fieldName"
                  :key="item.fieldName"
                >{{ item.labelName }}</Option>
              </Select>
            </FormItem>
            <!-- v-show="!isShowTaskNameFrom" -->
            <FormItem label="任务名称参数：" prop="taskNameFrom">
              <!-- <div style="display: flex"> -->
              <!-- <Input
                v-model="executeFormItems.taskNameFrom"
                placeholder="可手动输入也可以点击选择按钮从输入参数中选择"
              />-->

              <div style="display: flex" v-show="!isShowTaskNameFrom">
                <Input
                  v-model="executeFormItems.taskNameFrom"
                  placeholder="可手动输入也可以点击选择按钮从输入参数中选择"
                />
                <Button
                  type="primary"
                  class="system-btn-style"
                  style="margin-left: 10px"
                  @click="selectTaskNameFromBtn"
                >选择</Button>
              </div>

              <Select
                v-show="isShowTaskNameFrom"
                v-model="executeFormItems.taskNameFrom"
                style="width: 362px"
                placeholder="参数来源于输入参数"
              >
                <Option
                  v-for="item in inputParams"
                  :value="item.fieldName"
                  :key="item.fieldName"
                >{{ item.labelName }}</Option>
              </Select>
            </FormItem>
            <FormItem label="通过率（0-1）：" prop="passRate">
              <!-- <Input
                type="number"
                v-model="executeFormItems.passRate"
                placeholder="0-1的数值；默认1"
              />-->
              <InputNumber :max="1" :min="0" :step="0.1" v-model="executeFormItems.passRate"></InputNumber>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane label="资源信息">
          <Form
            ref="executeFormValidate1"
            :model="resourceFormItems"
            :label-width="130"
            label-position="left"
            class="algoForm"
          >
            <!-- <Checkbox v-model="resourceFormItems.isUseResource"
                >算法使用资源量</Checkbox
            >-->
            <FormItem prop="name" label="常规CPU（个）">
              <Input v-model="resourceFormItems.requestCpu" placeholder="不能超过计算节点CPU的最大核数" />
            </FormItem>
            <FormItem label="最大CPU（个）">
              <Input
                v-model="resourceFormItems.limitCpu"
                placeholder="不能超过计算节点CPU的最大核数；默认与常规CPU保持一致"
              />
            </FormItem>
            <FormItem label="常规内存（Gi）" prop="requestMemory">
              <Input v-model="resourceFormItems.requestMemory" placeholder="不能超过计算节点最大内存" />
            </FormItem>
            <FormItem label="最大内存（Gi）" prop="limitMemory">
              <Input
                v-model="resourceFormItems.limitMemory"
                placeholder="不能超过计算节点最大内存；默认与常规内存保持一致"
              />
            </FormItem>
            <FormItem label="GPU数量（个）" prop="gpu">
              <Input v-model="resourceFormItems.gpu" placeholder />
            </FormItem>
            <!-- <Checkbox v-model="resourceFormItems.isUseGPU">使用GPU</Checkbox> -->
          </Form>
        </TabPane>
      </Tabs>
    </Row>
    <Modal
      v-model="addInputParamModel"
      draggable
      scrollable
      :width="800"
      class="algoModel"
      :styles="{ top: '50px' }"
    >
      <p slot="header" class="modalHeader">{{ isAddparamItem ? "新增" : "修改" }}输入参数</p>
      <p slot="close" @click="addInputParamModel = false" style="font-size: 1.2rem">x</p>
      <Form
        ref="inputParamFormValidate"
        :model="inputParamItem"
        :label-width="124"
        label-position="right"
        inline
        :rules="inputParamRuleValidate"
        class="algorithmListForm algoForm"
      >
        <FormItem prop="labelName" label="参数中文名称：">
          <Input v-model="inputParamItem.labelName" placeholder="请输入参数中文名称" />
        </FormItem>
        <FormItem prop="fieldName" label="参数英文名称：">
          <Input v-model="inputParamItem.fieldName" placeholder="请输入参数英文名称：" />
        </FormItem>
        <FormItem label="参数默认值：">
          <Input v-model="inputParamItem.defaultValue" placeholder="请输入参数默认值：" />
        </FormItem>
        <FormItem label="参数描述：">
          <Input
            v-model="inputParamItem.describe"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
            placeholder="请输入描述信息..."
          ></Input>
        </FormItem>
        <FormItem prop="type" label="参数类型：">
          <Select v-model="inputParamItem.type" class="algGroup" @on-change="inputParamTypeChange">
            <Option
              v-for="item in paramTypeOptions"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
          <Collapse v-show="setSelectValueCollapse">
            <Panel>
              请设置下拉选择项值
              <div slot="content">
                <div>
                  <CButton
                    @click="addSeletOptionBtn"
                    color="info"
                    class="system-btn-style"
                    style="margin-top: -10px"
                  >+</CButton>
                </div>

                <Form
                  :label-width="20"
                  label-position="left"
                  inline
                  class="setSelectValueOptionsForm"
                  v-for="(item, index) in selectValueOptions"
                  :key="item.value"
                  :value="item.value"
                >
                  <FormItem label="键：">
                    <Input v-model="item.labelName" size="samll" placeholder />
                  </FormItem>

                  <FormItem label="值：">
                    <Input v-model="item.value" size="samll" placeholder />
                  </FormItem>
                  <CButton
                    @click="clearSelectValueItem(item, index)"
                    color="info"
                    class="system-btn-style"
                  >-</CButton>
                </Form>
              </div>
            </Panel>
          </Collapse>
        </FormItem>
        <FormItem label="是否多值：">
          <i-switch :value="inputParamItem.plural" size="large" @on-change="changePlural">
            <span slot="open"></span>
            <span slot="close"></span>
          </i-switch>
        </FormItem>

        <FormItem prop="minValue" label="参数最小值：" v-show="isShowinputNumber">
          <Input v-model="inputParamItem.minValue" placeholder="请输入最小值" />
        </FormItem>
        <FormItem prop="maxValue" label="参数最大值：" v-show="isShowinputNumber">
          <Input v-model="inputParamItem.maxValue" placeholder="请输入最大值" />
        </FormItem>

        <FormItem label="扩展名约束：" v-show="isShowExtNameConstraints">
          <Select v-model="inputParamItem.extNameConstraints" class="algGroup" multiple>
            <Option
              v-for="item in extensionOptions"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="是否必填：">
          <i-switch :value="inputParamItem.required" size="large" @on-change="changeRequired">
            <span slot="open"></span>
            <span slot="close"></span>
          </i-switch>
        </FormItem>
        <FormItem label="是否显示：">
          <i-switch :value="inputParamItem.showSwitch" size="large" @on-change="changeShowSwitch">
            <span slot="open"></span>
            <span slot="close"></span>
          </i-switch>
        </FormItem>
        <FormItem prop="countFlag" label="统计景数：">
          <i-switch :value="inputParamItem.countFlag" @on-change="changeCountFlag" />
        </FormItem>
      </Form>
      <template #footer>
        <CButton @click="addInputParamItemOk" color="info" class="system-btn-style">确定</CButton>
        <CButton @click="addInputParamModel = false" color="info" class="system-btn-style">取消</CButton>
      </template>
    </Modal>
    <Modal
      v-model="addOutputParamModel"
      draggable
      scrollable
      title="新建输出参数"
      :width="800"
      class="algoModel"
    >
      <p slot="header" class="modalHeader">{{ isAddparamItem ? "新增" : "修改" }}输出参数</p>
      <p slot="close" @click="addOutputParamModel = false" style="font-size: 1.2rem">x</p>
      <Form
        ref="outputParamFormValidate"
        :model="outputParamItem"
        :label-width="124"
        label-position="right"
        inline
        :rules="inputParamRuleValidate"
        class="algorithmListForm algoForm"
      >
        <FormItem prop="labelName" label="参数中文名称：">
          <Input v-model="outputParamItem.labelName" placeholder="请输入参数中文名称" />
        </FormItem>
        <FormItem prop="fieldName" label="参数英文名称：">
          <Input v-model="outputParamItem.fieldName" placeholder="请输入参数英文名称：" />
        </FormItem>
        <FormItem prop="type" label="参数来源：">
          <Select v-model="outputParamItem.source" class="algGroup" @on-change="paramSourceChange">
            <Option
              v-for="item in sourceOptions"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="来源字段：">
          <Input
            v-if="displaySouceFieldInput"
            v-model="outputParamItem.fromName"
            placeholder="请输入参数来源字段名字(英文名字)："
          />
          <Select
            v-else
            v-model="outputParamItem.fromName"
            style="width: 362px"
            placeholder="参数来源于输入参数"
          >
            <Option
              v-for="item in inputParams"
              :value="item.fieldName"
              :key="item.fieldName"
            >{{ item.labelName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="参数描述：">
          <Input
            v-model="outputParamItem.describe"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
            placeholder="请输入描述信息..."
          ></Input>
        </FormItem>
        <FormItem prop="type" label="参数类型：">
          <Select v-model="outputParamItem.type" class="algGroup">
            <Option
              v-for="item in paramTypeOptions"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="是否多值：">
          <i-switch :value="outputParamItem.plural" size="large" @on-change="changeOutputPlural">
            <span slot="open"></span>
            <span slot="close"></span>
          </i-switch>
        </FormItem>

        <FormItem label="tag标识：">
          <Select v-model="outputParamItem.tag" class="algGroup">
            <Option
              v-for="item in tagOptions"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </FormItem>
      </Form>
      <template #footer>
        <CButton @click="addOutputParamItemOk" color="info" class="system-btn-style">确定</CButton>
        <CButton @click="addOutputParamModel = false" color="info" class="system-btn-style">取消</CButton>
      </template>
    </Modal>
    <Spin fix v-if="isLoading">
      <Icon type="ios-loading" size="80" class="demo-spin-icon-load"></Icon>
      <div>{{ loadingText }}</div>
    </Spin>
  </div>
</template>
<script>
export default {
  name: "addAlgoPluginModal",
  props: {
    modalShow: {
      type: Boolean,
      default() {
        return false;
      }
    },
    groupData: {
      type: Array,
      default() {
        return [];
      }
    },
    currentSelectGroup: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      isShowUploadZipBtn: false, //zip包上传按钮  没选择文件时  按钮隐藏
      isShowUploadIconBtn: false,

      displaySouceFieldInput: false, //outputParamItem.source默认是task  不是input
      uploadIconStatus: {
        ok: false,
        unOk: false
      },
      uploadZipStatus: {
        ok: false,
        unOk: false
      },
      isLoading: false,
      loadingText: "正在上传请稍后！",
      groupDataCascader: [],

      isShowTaskNameFrom: false,
      currentParamItem: {}, //输入输出表格点击的当前对象
      isAddparamItem: true,
      isShowZip: true, //算法类型是command时需要上传zip依赖包，其他不需要
      zipFile: "",
      iconFile: "",
      inputParams: [],
      outputParams: [],
      addInputParamModel: false,
      addOutputParamModel: false,
      addAlgoPluginModal: true,

      setSelectValueCollapse: false,
      isShowExtNameConstraints: false,
      isShowinputNumber: false,

      selectValueOptions: [], //新增下拉选择的键值对数据
      batchOptions: [
        { label: "不拆分", value: "none" },
        { label: "拆分", value: "param" }
      ],
      algoTypeOptions: [
        { label: "command", value: "command" },
        { label: "python", value: "python" },
        { label: "python3", value: "python3" }
        // { label: "java", value: "java" },
      ],
      sourceOptions: [
        { label: "输入参数", value: "input" },
        { label: "算法输出", value: "task" }
      ],
      tagOptions: [
        { label: "无", value: "" },
        { label: "输出参数是影像产品", value: "product" },
        { label: "输出参数是质检报告", value: "check-report" }
      ],
      paramTypeOptions: [
        { label: "字符串", value: "string" },
        { label: "文件", value: "file" },
        { label: "文件夹", value: "dir" },
        { label: "整型", value: "int" },
        { label: "浮点型", value: "float" },
        { label: "布尔型", value: "boolean" },
        // { label: "下拉框", value: "select" },  //暂时不用
        { label: "空间参考", value: "spatialref" },
        { label: "dem下拉框", value: "dem_select" },
        { label: "参考影像下拉框", value: "ref_select" },
        { label: "基准索引下拉框", value: "base_index_select" },
        { label: "json对象", value: "json_object" },
        { label: "project_image", value: "project_image" }
      ],
      extensionOptions: [
        { label: "tif文件", value: "*.tif" },
        { label: "tiff文件", value: "*.tiff" },
        { label: "img文件", value: "*.img" },
        { label: "dat文件", value: "*.dat" },
        { label: "hdr文件", value: "*.hdr" },
        { label: "PIEprj文件", value: "*.PIEprj" },
        { label: "til文件", value: "*.til" },
        { label: "pix文件", value: "*.pix" }
      ],
      dataCascader: [], //级联选择
      // 基本信息
      algPackageInfoFormItem: {
        algProvider: "", //提供单位
        algDescribe: "", //算法描述
        algName: "", //算法中文名称
        algNameAbbr: "", //算法简称
        algVersion: "", //算法版本
        algGroupName: [], //算法分组
        algId: "", //算法标识
        algType: "command" //算法执行类型
      },
      // 算法包信息
      algoFormItems: {
        package: "", //临时zip包
        iconFile: "", //临时定义
        iconPath: "", //图标位置
        zipFilePath: "", //算法压缩包位置
        commandPath: "", //算法入口
        // variable: [], //环境变量列表
        commandId: "", //算法标识
        baseImage: "" //基础镜像
      },
      // 资源信息
      resourceFormItems: {
        // isUseResource: true,
        // isUseGPU: false,
        requestCpu: 1,
        requestMemory: 2,
        limitCpu: 1,
        limitMemory: 2,
        gpu: 0
      },
      // 执行信息
      executeFormItems: {
        splitType: "none", //拆分方式none, param
        splitItems: [], //拆分参数字段，来自输入参数
        taskNameFrom: "", //从输入参数中选择，或者默认字符串
        passRate: 1 //通过率， 0：不考虑算法执行结果 1：算法全部成功 other: (0,1)
      },
      ruleValidate1: {
        algName: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur"
          }
        ],
        algGroupName: [
          {
            transform: value => String(value),
            required: true,
            message: "请选择算法分组",
            trigger: "change"
          }
        ],
        algVersion: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur"
          }
        ],
        algId: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur"
          }
        ]
      },
      ruleValidate2: {
        zipFilePath: [
          {
            required: true,
            message: "请上传zip包文件",
            trigger: "blur"
          }
        ],
        iconPath: [
          {
            required: true,
            message: "请上传算法图标文件",
            trigger: "blur"
          }
        ],
        commandPath: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur"
          }
        ],
        commandId: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur"
          }
        ],
        baseImage: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur"
          }
        ]
      },
      ruleValidate3: {
        passRate: [
          {
            required: true,
            type: "number",
            message: "该值不能为空",
            trigger: "blur"
          }
        ],
        taskNameFrom: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur"
          }
        ]
      },

      inputParamRuleValidate: {
        labelName: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur"
          }
        ],
        fieldName: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur"
          }
        ]
      },
      inputParamItem: {
        defaultValue: "",
        fieldName: "",
        labelName: "",
        describe: "",
        type: "string",
        plural: false, //是否多值
        // constaints
        extNameConstraints: ["*.tif", "*.tiff"], //拓展名约束
        maxValue: 0,
        minValue: 0,
        optionValues: [
          //用于新增select 增加选项值
          {
            labelName: "",
            value: ""
          }
        ],

        required: false, //是否必填
        showSwitch: true, //是否显示

        countFlag: false //统计图像处理景数, true: 该字段为影像数量统计参数，false: 不进行统计, 默认:false
      },
      outputParamItem: {
        labelName: "", //字段中文名称
        fieldName: "", //字段名称

        describe: "", //描述
        source: "task", //来源 task,input
        fromName: "", //来源字段名字
        type: "string", //参数类型
        plural: false, //是否多值
        tag: "" //特殊标识,默认值为空, product:标识该输出参数是影像产品, check-report:质检报告
      },
      inputColumns: [
        {
          title: "名称",
          key: "labelName",
          fixed: "left",
          width: 100
        },
        {
          title: "类型",
          key: "type",
          align: "center",
          width: 100
        },
        {
          title: "是否多值",
          key: "plural",
          align: "center",
          width: 100
        },
        {
          title: "默认值",
          key: "defaultValue",
          align: "center",
          width: 100
        },
        {
          title: "描述",
          key: "describe",
          minWidth: 120,
          maxWidth: 120
        },
        {
          title: "扩展名约束",
          key: "extNameConstraints",
          align: "center",
          width: 120
        },
        {
          title: "最小值",
          key: "minValue",
          align: "center",
          width: 100
        },
        {
          title: "最大值",
          key: "maxValue",
          align: "center",
          width: 100
        },
        {
          title: "是否必填",
          key: "required",
          align: "center",
          width: 100
        },
        {
          title: "是否显示",
          key: "showSwitch",
          align: "center",
          width: 100
        },
        {
          title: "统计景数",
          key: "countFlag",
          align: "center",
          width: 100
        },

        {
          title: "操作",
          key: "operator",
          slot: "operator",
          width: 120,
          fixed: "right"
        }
      ],
      outputColumns: [
        {
          title: "名称",
          key: "labelName",
          align: "center"
        },
        {
          title: "类型",
          key: "type",
          align: "center"
          // width: 120,
        },
        {
          title: "是否多值",
          key: "plural",
          align: "center"
          // width: 120,
        },

        {
          title: "描述",
          key: "describe",
          align: "center"
          // width: 120,
        },
        {
          title: "来源类型",
          key: "source",
          align: "center"
          // width: 120,
        },
        {
          title: "来源名称",
          key: "fromName",
          align: "center"
          // width: 120,
        },
        {
          title: "特殊标识",
          key: "tag",
          align: "center"
          // width: 120,
        },
        {
          title: "操作",
          slot: "operator",
          width: 120
        }
      ]
    };
  },
  watch: {
    groupData: {
      handler(val) {
        this.groupDataCascader = val;
      },
      deep: true,
      immediate: true
    }
    // currentSelectGroup: {
    //   handler(val) {
    //     if (val) this.currentSelectGroupName = val;
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  created() {
    let _this = this;
    this.$bus.$on("displayAlgoPluginParam", param => {
      // this.initModalParam(param);
    });
  },
  mounted() {},
  methods: {
    paramSourceChange(item) {
      if (item === "input") {
        this.displaySouceFieldInput = false;
      } else this.displaySouceFieldInput = true;
    },
    getAlgoPluginParam(type) {
      let _this = this;
      let param = {};
      _this.$refs.formValidate.validate(valid => {
        if (valid) {
          _this.$refs.algoBaseFormValidate.validate(valid => {
            if (valid) {
              _this.$refs.executeFormValidate.validate(valid => {
                if (valid) {
                  param = this.getFormData(type);
                  // this.reset();
                } else {
                  this.$Message.warning("执行信息页面请完整填写表单信息！");
                }
              });
            } else {
              this.$Message.warning("算法包页面请完整填写表单信息！");
            }
          });
        } else {
          this.$Message.warning("基本信息页面请完整填写表单信息！");
        }
      });

      return param;
    },
    reset() {
      this.algPackageInfoFormItem = {
        algProvider: "", //提供单位
        algDescribe: "", //算法描述
        algName: "", //算法中文名称
        algNameAbbr: "", //算法简称
        algVersion: "", //算法版本
        algGroupName: [], //算法分组
        algId: "", //算法标识
        algType: "command" //算法执行类型
      };
      // 算法包信息
      this.algoFormItems = {
        package: "", //临时zip包
        iconFile: "", //临时定义
        iconPath: "", //图标位置
        zipFilePath: "", //算法压缩包位置
        commandPath: "", //算法入口
        // variable: [], //环境变量列表
        commandId: "", //算法标识
        baseImage: "" //基础镜像
      };
      // 资源信息
      this.resourceFormItems = {
        // isUseResource: true,
        // isUseGPU: false,
        requestCpu: 1,
        requestMemory: 2,
        limitCpu: 1,
        limitMemory: 2,
        gpu: 0
      };
      // 执行信息
      this.executeFormItems = {
        splitType: "none", //拆分方式none, param
        splitItems: [], //拆分参数字段，来自输入参数
        taskNameFrom: "", //从输入参数中选择，或者默认字符串
        passRate: 1 //通过率， 0：不考虑算法执行结果 1：算法全部成功 other: (0,1)
      };

      this.isShowUploadZipBtn = false; //zip包上传按钮  没选择文件时  按钮隐藏
      this.isShowUploadIconBtn = false;
      this.uploadZipStatus = {
        ok: false,
        unOk: false
      };
    },
    initModalParam(param) {
      this.inputParams = param.algParamInfo.inputParams;
      this.outputParams = param.algParamInfo.outputParams
        ? param.algParamInfo.outputParams
        : [];
      this.algPackageInfoFormItem = param.algBaseInfo; //算法基本信息
      this.resourceFormItems = param.algResourceInfo; //算法资源信息
      this.executeFormItems = param.algExeInfo; //算法执行信息
      this.algoFormItems = param.algPackageInfo; //算法包
      debugger;
      let algoGroupName = JSON.parse(
        JSON.stringify(param.algBaseInfo.algGroupName)
      );
      let group = algoGroupName ? algoGroupName.split(".") : [];
      this.algPackageInfoFormItem.algGroupName = group;

      // zipPath和iconPath 路径转换 界面只显示文件名
      let iconPath = param.algPackageInfo.iconPath;
      let zipPath = param.algPackageInfo.zipFilePath;
      this.algoFormItems.package = zipPath
        ? zipPath.substring(zipPath.lastIndexOf("/") + 1)
        : "无";
      this.algoFormItems.iconFile = iconPath
        ? iconPath.substring(iconPath.lastIndexOf("/") + 1)
        : "无";
    },
    uploadZipFile(type) {
      let path = this.$api.modelApi.uploadAlgoSource;
      let file = "";

      let param = new FormData();
      if (type === "zip") file = this.zipFile;
      else file = this.iconFile;
      param.append("file", file);
      this.isLoading = true;
      this.http.post(path, param).then(res => {
        this.isLoading = false;
        if (res.data.success) {
          this.$Message.success("上传成功");
          if (type === "zip") {
            this.algoFormItems.zipFilePath = res.data.data;
            this.uploadZipStatus.ok = true;
            this.uploadZipStatus.unOk = false;
          } else {
            this.algoFormItems.iconPath = res.data.data;
            this.uploadIconStatus.ok = true;
            this.uploadIconStatus.unOk = false;
          }
        } else {
          if (type === "zip") {
            this.uploadZipStatus.unOk = true;
            this.uploadZipStatus.ok = false;
          } else {
            this.this.uploadZipStatus.unOk = true;
            this.uploadIconStatus.ok = false;
          }
          this.$Message.console.error(res.data.message);
        }
      });
    },
    zipHandUpload(file) {
      debugger;
      this.zipFile = file;
      this.$nextTick(function() {
        this.$set(this.algoFormItems, "package", file.name);
      });

      // this.algoFormItems.package = file.name;

      this.isShowUploadZipBtn = true;
      return false;
    },
    iconHandUpload(file) {
      this.iconFile = file;
      this.algoFormItems.iconFile = file.name;
      this.isShowUploadIconBtn = true;
      return false;
    },
    // 得到提交参数
    getFormData(type) {
      let param = {
        action: type,
        algParamInfo: {
          inputParams: [],
          outputParams: []
        },
        algBaseInfo: {},
        algResourceInfo: {},
        algExeInfo: {},
        algPackageInfo: {
          iconPath: "",
          zipFilePath: "",
          baseImage: "ortho_base_image:1.0",
          commandId: "sd",
          commandPath: "/lib64/PIEOrthoBuildPry"
        }
      };
      param.algParamInfo.inputParams = this.inputParams;
      param.algParamInfo.outputParams = this.outputParams;
      param.algBaseInfo = JSON.parse(
        JSON.stringify(this.algPackageInfoFormItem)
      ); //算法基本信息
      param.algResourceInfo = this.resourceFormItems; //算法资源信息
      param.algExeInfo = this.executeFormItems; //算法执行信息
      param.algPackageInfo = this.algoFormItems; //算法包

      let groupArr = this.algPackageInfoFormItem.algGroupName;

      let group = groupArr.length > 0 ? groupArr.join(".") : "";
      param.algBaseInfo.algGroupName = group;

      return param;
    },
    // 保存  删除
    // save() {
    //   let param = this.getFormData("edit");
    //   let path = this.$api.modelApi.addAlgPlugin;
    //   this.http.post(path, param).then((res) => {
    //     if (res.data.success) {
    //     } else {
    //       this.$Message.error(res.data.message);
    //     }
    //   });
    // },
    // 删除
    // submit() {
    //   let param = this.getFormData("rebuild");
    //   let param1 = {
    //     action: "rebuild",
    //     algBaseInfo: {
    //       algDescribe: "df",
    //       algGroupName: "df",
    //       algId: "df",
    //       algName: "df",
    //       algNameAbbr: "df",
    //       algProvider: "df",
    //       algType: "command",
    //       algVersion: "df",
    //     },
    //     algExeInfo: {
    //       passRate: 0,
    //       splitItems: ["we"],
    //       splitType: "param",
    //       taskNameFrom: "we",
    //     },
    //     algPackageInfo: {
    //       baseImage: "ortho_base_image:1.0",
    //       commandId: "sd",
    //       commandPath: "/lib64/PIEOrthoBuildPry",
    //       iconPath: "",
    //       zipFilePath: "",
    //     },
    //     algParamInfo: {
    //       inputParams: [
    //         {
    //           countFlag: true,
    //           defaultValue: "e",
    //           describe: "ew",
    //           extNameConstraints: ["*.tif", "*.png", "*.jpg"],
    //           fieldName: "we",
    //           labelName: "ddd",
    //           maxValue: 0,
    //           minValue: 0,
    //           optionValues: [
    //             {
    //               labelName: "df",
    //               value: "df",
    //             },
    //           ],
    //           plural: false,
    //           required: false,
    //           showSwitch: false,
    //           type: "string",
    //         },
    //       ],
    //       outputParams: [
    //         {
    //           describe: "sds",
    //           fieldName: "dd",
    //           fromName: "eee",
    //           labelName: "test",
    //           plural: false,
    //           source: "task",
    //           tag: "product",
    //           type: "int",
    //         },
    //       ],
    //     },
    //     algResourceInfo: {
    //       enableSource: false,
    //       gpu: 0,
    //       limitCpu: "5",
    //       limitMemory: "8Gi",
    //       requestCpu: "3",
    //       requestMemory: "2Gi",
    //     },
    //     id: "",
    //   };
    //   let path = this.$api.modelApi.addAlgPlugin;
    //   this.http.post(path, param1).then((res) => {
    //     if (res.data.success) {
    //     } else {
    //       this.$Message.error(res.data.message);
    //     }
    //   });
    // },
    // close() {
    //   this.$emit("close");
    // },
    clearItem() {},

    changePlural(val) {
      this.inputParamItem.plural = val;
    },
    changeOutputPlural(val) {
      this.outputParamItem.plural = val;
    },
    changeCountFlag(val) {
      this.inputParamItem.countFlag = val;
    },
    changeShowSwitch(val) {
      this.inputParamItem.showSwitch = val;
    },
    changeRequired(val) {
      this.inputParamItem.required = val;
    },

    addInputParamItemBtn() {
      this.addInputParamModel = true;
    },
    addInputParamItemOk() {
      debugger;
      this.$refs["inputParamFormValidate"].validate(valid => {
        if (valid) {
          if (this.isAddparamItem) {
            this.addInputParamItem();
          } else {
            this.updateInputParamItem();
          }
        } else {
          this.$Message.warning("请填写完整信息");
        }
      });
    },

    addInputParamItem() {
      let result = this.isRepeat(this.inputParams, this.inputParamItem, "add");
      if (!result) {
        if (this.inputParamItem.type === "select")
          this.inputParamItem.optionValues = JSON.parse(
            JSON.stringify(this.selectValueOptions)
          );
        else this.inputParamItem.optionValues = [];
        if (this.inputParamItem.type != "file") {
          this.inputParamItem.extNameConstraints = [];
        }

        this.inputParams.push(JSON.parse(JSON.stringify(this.inputParamItem)));
        this.addInputParamModel = false;
      } else {
        this.$Message.warning(
          "输入参数表格中中文名称或英文名称出现重复,请修改~"
        );
      }
    },
    // 输入和输入参数之间对应的fileName和labelName不能重复
    isRepeat(paramArr, currentParam, type) {
      let flag = false; //是否有重复的
      for (let i = 0; i < paramArr.length; i++) {
        let ele = paramArr[i];
        if (type == "add") {
          if (
            ele.fieldName == currentParam.fieldName ||
            ele.labelName == currentParam.labelName
          ) {
            flag = true;
            break;
          }
        } else {
          if (
            this.currentParamItem.index != i &&
            (ele.fieldName == currentParam.fieldName ||
              ele.labelName == currentParam.labelName)
          ) {
            flag = true;
            break;
          }
        }
      }

      return flag;
    },
    updateInputParamItem() {
      let result = this.isRepeat(
        this.inputParams,
        this.inputParamItem,
        "update"
      );
      if (!result) {
        if (this.inputParamItem.type === "select")
          this.inputParamItem.optionValues = JSON.parse(
            JSON.stringify(this.selectValueOptions)
          );
        else this.inputParamItem.optionValues = [];

        this.$nextTick(() => {
          this.$set(
            this.inputParams,
            this.currentParamItem.index,
            JSON.parse(JSON.stringify(this.inputParamItem))
          );
        });

        this.addInputParamModel = false;
        this.isAddparamItem = true;
      } else {
        this.$Message.warning(
          "输入参数表格中中文名称或英文名称出现重复,请修改~"
        );
      }
    },
    addOutputParamItemBtn() {
      this.addOutputParamModel = true;
    },
    addOutputParamItemOk() {
      debugger;
      this.$refs["outputParamFormValidate"].validate(valid => {
        if (valid) {
          debugger;
          if (this.isAddparamItem) {
            this.addOutputParamItem();
          } else this.updateOutputParam();
        }
      });
    },

    addOutputParamItem() {
      let result = this.isRepeat(
        this.outputParams,
        this.outputParamItem,
        "add"
      );
      if (!result) {
        this.outputParams.push(
          JSON.parse(JSON.stringify(this.outputParamItem))
        );
        this.addOutputParamModel = false;
      } else {
        this.$Message.warning(
          "输出参数表格中中文名称或英文名称出现重复,请修改~"
        );
      }
    },
    updateOutputParam() {
      let result = this.isRepeat(
        this.outputParams,
        this.outputParamItem,
        "update"
      );
      debugger;
      if (!result) {
        this.$nextTick(() => {
          this.$set(
            this.outputParams,
            this.currentParamItem.index,
            JSON.parse(JSON.stringify(this.outputParamItem))
          );
        });
        this.addOutputParamModel = false;
        this.isAddparamItem = true;
      } else {
        this.$Message.warning(
          "输出参数表格中中文名称或英文名称出现重复,请修改~"
        );
      }
    },
    deleteInputRow(row, index) {
      this.inputParams.splice(index, 1);
    },
    deleteOutputRow(row, index) {
      this.outputParams.splice(index, 1);
    },

    inputParamTypeChange(item) {
      if (item === "select") {
        this.setSelectValueCollapse = true;
      } else {
        this.setSelectValueCollapse = false;
      }
      if (item === "file") {
        this.isShowExtNameConstraints = true;
      } else this.isShowExtNameConstraints = false;

      if (item === "int" || item === "float") this.isShowinputNumber = true;
      else this.isShowinputNumber = false;
    },

    addSeletOptionBtn() {
      this.selectValueOptions.push({ labelName: "", value: "" });
    },
    clearSelectValueItem(item, index) {
      this.selectValueOptions.splice(index, 1);
    },
    algoTypeChange(val) {
      // if (val === "command") {
      //   this.isShowZip = true;
      // } else this.isShowZip = false;
    },
    editInputBtn(row, index) {
      this.isAddparamItem = false;
      this.addInputParamModel = true;
      this.currentParamItem = row;
      this.currentParamItem.index = index;
      debugger;
      if (row.type === "file") {
        this.isShowExtNameConstraints = true;
      } else this.isShowExtNameConstraints = false;
      this.inputParamItem = JSON.parse(JSON.stringify(row));
    },
    editOutputBtn(row, index) {
      this.isAddparamItem = false;
      this.addOutputParamModel = true;
      this.currentParamItem = row;
      this.currentParamItem.index = index;
      this.outputParamItem = JSON.parse(JSON.stringify(row));
    },
    selectTaskNameFromBtn() {
      this.isShowTaskNameFrom = true;
    }
  }
  // beforeDestroy() {
  //   debugger;
  //   this.$bus.$off("displayAlgoPluginParam");
  // }
};
</script>
<style scoped>
.algGroup {
  width: 359px;
  height: 35px;
}

.modalBody-algo {
  height: 430px;
}

/* .algorithmListForm /deep/.ivu-form-item-content {
  width: 360px;
} */

/deep/.ivu-form-item-content {
  width: 360px;
}
/deep/ .ivu-form-item {
  margin-left: 60px;
}
.setSelectValueOptionsForm {
  display: flex;
}
.setSelectValueOptionsForm /deep/ .ivu-form-item-content {
  width: 100%;
}
.setSelectValueOptionsForm /deep/ .ivu-form-item {
  margin-left: 5px;
  display: flex;
  width: 140px;
}

.algoForm {
  margin-top: 20px;
  /* margin-left: 10px; */
}

.header-wrap {
  display: flex;
  justify-content: space-between;
}

/deep/.ivu-modal-body {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.algoModel /deep/ .ivu-modal-wrap {
  z-index: 1051 !important;
}

/deep/.ivu-input-number {
  width: 360px;
}
</style>